<template>
  <input type="text" @keydown.prevent="onKeydown" v-model="quantity" />
</template>

<script lang="ts">
export default {
  name: "EventJest",
};
</script>

<script lang="ts" setup>
import { ref, watch, defineEmits } from "vue";
const KEY_DOWN = 40;
const KEY_UP = 38;
const ESCAPE = 27;
const quantity = ref(0);
let increment = () => {
  quantity.value += 1;
};
let decrement = () => {
  quantity.value -= 1;
};
let clear = () => {
  quantity.value = 0;
};
let onKeydown = (e: KeyboardEvent) => {
  if (e.keyCode === ESCAPE) {
    clear();
  }
  if (e.keyCode === KEY_DOWN) {
    decrement();
  }
  if (e.keyCode === KEY_UP) {
    increment();
  }
  if (e.key === "a") {
    quantity.value = 13;
  }
};
const emit = defineEmits({
  input: null,
});
watch([quantity], (newVal) => {
  emit("input", newVal);
});
</script>
